/* Layout CSS Document */
/*******************************************************************************

    Sections
    1. Body
    2. Background and banners
    3. Sticky Header
    4. Sticky Footer
    5. Static Footer
    6. Bootstrap Grid System
    7. Generic layout classes


1. Body
*******************************************************************************/
body{
	.lightGrayBG;
	overflow-x:hidden;
	margin-top:80px;
}
a{
	color:@base;
}

/*******************************************************************************
2. Background and banners 
*******************************************************************************/
#backgroundScene{
	position:absolute;
	top:0;
	left:0;
	min-height:100%;
	min-width:100%  
}
#mainBody{margin:0;}
.banner{
	display:block;
	margin:0 auto;	
		.container img{
			vertical-align:middle;
		}
}

/*******************************************************************************
3. STICKY HEADER 
*******************************************************************************/

/*Header container*/
header.stickyHeader{
	position:fixed;
	top:0;
	width:100%;
	display:block;
	height:40px;
	z-index:105;
	 	.slide_content{
			padding-bottom:1em;
		}
		
}

/*Logo container*/
a.logo_frame{
	float:left;
	z-index:104;
	margin:0px;
    padding:0px;
}

/*TopNav container - i.e. Search, Product finder, Login and contact number*/
.topNav_box{
	display:block;	
	background:#ffffff;
	.box-shadow(0px, 3px, 3px, 0.5);
	width:100%;
	height:40px;
	z-index:102;
}
/*.topNav_box .container{background:#fff;}	*/
.head_Nav{width:940px; margin:0 auto;}

/*******************************************************************************
4. STICKY FOOTER 
*******************************************************************************/

footer.stickyfooter{
	position:fixed; 
	bottom:0px;
	background:#666666;
	width:100%;
	height:40px;
	color:#000;
    .box-shadow(0px, 0px, 5px, 0.5);
    z-index:100;
}
	
/*******************************************************************************
5. Static Footer Components 
*******************************************************************************/

#static_footer{
	background:#fff;
	article{
		background:#eee;
		padding:1em;
		h6{
			font-size:1.1em;
			margin:0;
		}
		p{
			font-size:.7em;
			margin-top:0;
		}
		ul li{
			font-size:.7em;
			&:before{
				content:"- ";
			}
			a{
				text-decoration:none;
				color:#666666;
				font-size: 1.2em;
			}
		}
	}
	.center{
		text-align:center;
	}
} 
.footer{
	padding:.5em; 
	text-align:center;
	font-size:.9em;
	color:#999999;
	border-top:4px solid #eee;
	margin-top:.5em;
}
p.sparkstone_credit{
	margin-bottom:8em !important;
	width:100%;
	text-align:right;
}

/*******************************************************************************
6. Bootstrap grid system
/*******************************************************************************/

.row { margin-left: -20px; *zoom: 1;}
.row:before,.row:after {
  display: table;
  content: "";
  line-height: 0;
}
.row:after {clear: both;}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container {width: 940px;}
.span12 {width: 940px;}
.span11 {width: 860px;}
.span10 {width: 780px;}
.span9 {width: 700px;}
.span8 {width: 620px;}
.span7 {width: 540px;}
.span6 {width: 460px;}
.span5 {width: 380px;}
.span4 {width: 300px;}
.span3 {width: 220px;}
.span2 {width: 140px;}
.span1 {width: 60px;}

.offset12 {margin-left: 980px;}
.offset11 {margin-left: 900px;}
.offset10 {margin-left: 820px;}
.offset9 {margin-left: 740px;}
.offset8 {margin-left: 660px;}
.offset7 {margin-left: 580px;}
.offset6 {margin-left: 500px;}
.offset5 {margin-left: 420px;}
.offset4 {margin-left: 340px;}
.offset3 {margin-left: 260px;}
.offset2 {margin-left: 180px;}
.offset1 {margin-left: 100px;}

.row-fluid {width: 100%; *zoom: 1;}
.row-fluid:before,.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {clear: both;}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
}
.row-fluid [class*="span"]:first-child {margin-left: 0;}
.row-fluid .controls-row [class*="span"] + [class*="span"] {margin-left: 2.127659574468085%;}

.row-fluid .span12 {width: 100%; *width: 99.94680851063829%;}
.row-fluid .span11 {width: 91.48936170212765%; *width: 91.43617021276594%;}
.row-fluid .span10 {width: 82.97872340425532%; *width: 82.92553191489361%;}
.row-fluid .span9 {width: 74.46808510638297%;  *width: 74.41489361702126%;}
.row-fluid .span8 {width: 65.95744680851064%;  *width: 65.90425531914893%;}
.row-fluid .span7 {width: 57.44680851063829%;  *width: 57.39361702127659%;}
.row-fluid .span6 {width: 48.93617021276595%;  *width: 48.88297872340425%;}
.row-fluid .span5 {width: 40.42553191489362%;  *width: 40.37234042553192%;}
.row-fluid .span4 {width: 31.914893617021278%; *width: 31.861702127659576%;}
.row-fluid .span3 {width: 23.404255319148934%; *width: 23.351063829787233%;}
.row-fluid .span2 {width: 14.893617021276595%; *width: 14.840425531914894%;}
.row-fluid .span1 {width: 6.382978723404255%;  *width: 6.329787234042553%;}

.row-fluid .offset12 {margin-left: 104.25531914893617%;  *margin-left: 104.14893617021275%;}
.row-fluid .offset12:first-child {margin-left: 102.12765957446808%;  *margin-left: 102.02127659574467%;}
.row-fluid .offset11 {margin-left: 95.74468085106382%;  *margin-left: 95.6382978723404%;}
.row-fluid .offset11:first-child {margin-left: 93.61702127659574%; *margin-left: 93.51063829787232%;}
.row-fluid .offset10 {margin-left: 87.23404255319149%; *margin-left: 87.12765957446807%;}
.row-fluid .offset10:first-child {margin-left: 85.1063829787234%; *margin-left: 84.99999999999999%;}
.row-fluid .offset9 {margin-left: 78.72340425531914%; *margin-left: 78.61702127659572%;}
.row-fluid .offset9:first-child {margin-left: 76.59574468085106%; *margin-left: 76.48936170212764%;}
.row-fluid .offset8 {margin-left: 70.2127659574468%; *margin-left: 70.10638297872339%;}
.row-fluid .offset8:first-child {margin-left: 68.08510638297872%; *margin-left: 67.9787234042553%;}
.row-fluid .offset7 {margin-left: 61.70212765957446%;  *margin-left: 61.59574468085106%;}
.row-fluid .offset7:first-child {margin-left: 59.574468085106375%;  *margin-left: 59.46808510638297%;}
.row-fluid .offset6 {margin-left: 53.191489361702125%;  *margin-left: 53.085106382978715%;}
.row-fluid .offset6:first-child {margin-left: 51.063829787234035%; *margin-left: 50.95744680851063%;}
.row-fluid .offset5 {margin-left: 44.68085106382979%; *margin-left: 44.57446808510638%;}
.row-fluid .offset5:first-child {margin-left: 42.5531914893617%; *margin-left: 42.4468085106383%;}
.row-fluid .offset4 {margin-left: 36.170212765957444%; *margin-left: 36.06382978723405%;}
.row-fluid .offset4:first-child {margin-left: 34.04255319148936%; *margin-left: 33.93617021276596%;}
.row-fluid .offset3 {margin-left: 27.659574468085104%; *margin-left: 27.5531914893617%;}
.row-fluid .offset3:first-child {margin-left: 25.53191489361702%; *margin-left: 25.425531914893618%;}
.row-fluid .offset2 {margin-left: 19.148936170212764%; *margin-left: 19.04255319148936%;}
.row-fluid .offset2:first-child {margin-left: 17.02127659574468%; *margin-left: 16.914893617021278%;}
.row-fluid .offset1 {margin-left: 10.638297872340425%; *margin-left: 10.53191489361702%;}
.row-fluid .offset1:first-child {margin-left: 8.51063829787234%; *margin-left: 8.404255319148938%;}

[class*="span"].hide,.row-fluid [class*="span"].hide {display: none;}
[class*="span"].pull-right,.row-fluid [class*="span"].pull-right {float: right;}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {clear: both;}
.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}
.container-fluid:before,
.container-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.container-fluid:after {clear: both;}

/*******************************************************************************
7. Generic layout classes
*******************************************************************************/

.alignLeft{float:left;}
.alignRight{float:right;}
.mt{margin-top:1em !important;}
.mb{margin-bottom:1em !important;}

/*border bottom (bb) */
.bb{border-bottom:1px solid @gray; padding-bottom:1em; margin-bottom:1em;}
.hr{border-bottom: 4px solid #eee;}